<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 禁用电话号码检测功能，禁止对数字随便可以拨号 -->
		<meta name="format-detection" content="telephone=no">
		<!-- 禁用地址检测功能，禁止跳转到地图 -->
		<meta name="format-detection" content="address=no">
		<!-- 在苹果设备上以全屏方式打开本网页 -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<!-- 设置在苹果设备上状态的颜色，默认白色，要设置成什么颜色以Web颜色的风格而定 -->
		<meta name="apple-mobile-web-app-status-bar-style" content="white">
		<title>微信商城-首页</title>
		<%@ include file="/views/common/required.jspf"%>
		<link rel="stylesheet" href="${ctx}/statics/common/styles/index.css" />
		<!-- 苹果设备在桌面上生成的快捷图标 -->
		<link rel="apple-touch-icon" href="${ctx}/statics/common/img/apple-touch-icon.png">
		<link rel="icon" href="${ctx}/statics/common/img/favicon.ico">
	</head>

	<body>
		<header class="header-wrapper">
			<ul class="header-list">
				<li class="list-active">
					<a href="">
						<i class="fa fa-2x fa-home"></i>
						<p>首页</p>
					</a>
				</li>
				<li>
					<a href="${ctx}/product/listStoreCart.html?id=${user.id}">
						<i class="fa fa-2x fa-shopping-cart"></i>
						<p>购物车</p>
					</a>
				</li>
				<li>
					<a href="${ctx}/user/userInfo.html">
						<i class="fa fa-2x fa-user"></i>
						<p>用户中心</p>
					</a>
				</li>
			</ul>
		</header>
		<section style="width: 100%; height: .6rem;"></section>
		<section class="index-banner swiper-container" >
			 <div class="swiper-wrapper">
				<div class="swiper-slide">
					<img src="${ctx}/statics/common/img/1.jpg" />
					<div class="slide-layer">
						<div class="layer-inner">
							<p>微信价<span>600元</span></p>
							<p>微信商城</p>
							<div class="inner-right">
								<a href="info.jsp">立即购买</a>
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-slide">
					<img src="${ctx}/statics/common/img/2.jpg" />
					<div class="slide-layer">
						<div class="layer-inner">
							<p>微信价<span>600元</span></p>
							<p>微信商城</p>
							<div class="inner-right">
								<a href="info.jsp">立即购买</a>
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-slide">
					<img src="${ctx}/statics/common/img/3.jpg" />
					<div class="slide-layer">
						<div class="layer-inner">
							<p>微信价<span>600元</span></p>
							<p>微信商城</p>
							<div class="inner-right">
								<a href="info.jsp">立即购买</a>
							</div>
						</div>
					</div>
				</div>
				<div class="swiper-slide">
					<img src="${ctx}/statics/common/img/4.jpg" />
					<div class="slide-layer">
						<div class="layer-inner">
							<p>微信价<span>600元</span></p>
							<p>微信商城</p>
							<div class="inner-right">
								<a href="info.jsp">立即购买</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</section>

		<section class="index-main" id="list">
			<c:forEach items="${producePageModel.list }"  var="produce"  varStatus="v">
				<a href="<%=request.getContextPath()%>/product/getProduct.html?id=${produce.id}">
					<div class="main-list">
						<img src="${ctx}/statics/common/img/product1.png" />
						<div class="trangle-hot">
							<div class="trangle-text">
								<span>热销</span>
							</div>
						</div>
						<div class="list-right">
							<p class="name">${produce.name }</p>
							<p class="description">${produce.description }</p>
							<p class="price">价格:￥<span>${produce.price }</span></p>
						</div>
					</div>
				</a>
			</c:forEach>
		</section>
		<script type="text/javascript">
			$(function() {
				var mySwiper = new Swiper('.swiper-container', {
					loop: true,
					autoplay: 5000,
				});
			})
			var flag = false;
		    var pageNo = 1;
		    var flag1 = true;
			$(window).scroll(function () {
		        var distance = $(document).height() - ($(window).scrollTop() + $(window).height());
		        if ((distance <= 50) && flag) {
		            $.post('<%=request.getContextPath()%>/product/listNewProduct.html?&pageNo=' + pageNo, function (page) {
		            	var data=page.list;
		                if (data.length == 0) {
		                	if(flag1){
		                	$('#list').append("<center><b>没有了!</b></center");
		                	}
		                	flag=false;
		                    return;
		                }
		                console.info("aaa");
		                var html = [];
		                for (var i = 0; i < data.length; i++) {
		                    html.push('<a href="${ctx}/product/getProduct.html?id=${data.id}">');
		                    html.push('   <div class="main-list">');
		                    html.push('        <img src="${ctx}/statics/common/img/product1.png" />');
		                    html.push('         <div class="trangle-hot">');
		                    html.push('        		<div class="trangle-text">');
		                    html.push('      			<span>热销</span>');
		                    html.push('      		</div>');
		                    html.push('         </div>');
		                    html.push('         <div class="list-right">');
		                    html.push('         	<p class="name">'+data[i].name+'</p>');
		                    html.push('          	<p class="description">'+data[i].description+'</p>');
		                    html.push('          	<p class="price">价格:￥<span>'+data[i].price+'</span></p>');
		                    html.push('         </div>');
		                    html.push('   </div>');
		                    html.push('</a>');
		                }
		                $('#list').append(html.join(''));
		                pageNo += 1;
		            },"json");
		        }
		        if (distance > 50) {
		            flag = true;
		        }
		    });
		</script>
	</body>

</html>